<template>
	<view class="container">
		<u-navbar title="教育经历" placeholder></u-navbar>
		<u-form :model="data.formData" :error-type="['toast']" ref="form1">
			<u-form-item required label="学校名称" prop="school" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-field :placeholder-style="data.placeholderStyle" :border-bottom="false" label-width="0"
						v-model="data.formData.school" placeholder="请输入学校名称"  />
				</view>
			</u-form-item>
			<u-form-item required label="专业" prop="major" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-field :placeholder-style="data.placeholderStyle" :border-bottom="false" label-width="0"
						v-model="data.formData.major" placeholder="请输入专业"  />
				</view>
			</u-form-item>
			<u-form-item required label="获得学历" prop="education_text" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input v-model="data.formData.education_text" :placeholder-style="data.placeholderStyle"
						placeholder="请选择学历" disabled @click="data.iseducation=true" />
					<u-icon name="arrow-right" color="#bbbbbb" size="40" @click="data.iseducation=true"></u-icon>
				</view>
			</u-form-item>
			<u-form-item required label="入学时间" prop="starttime" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input :placeholder-style="data.placeholderStyle" v-model="data.formData.starttime"
						placeholder="请选择入学时间" disabled @click="data.isstarttime=true" />
					<u-icon name="arrow-right" color="#bbbbbb" size="40" @click="data.isstarttime=true"></u-icon>
				</view>
			</u-form-item>
			<u-form-item required label="毕业时间" prop="endtim_etext" label-position="top" style="position: relative;">
				<view class="u-flex u-flex-1 u-row-between" >
					<u-input :placeholder-style="data.placeholderStyle" v-model="data.formData.endtim_etext"
						placeholder="请选择毕业时间" disabled @click="data.isendtime=true" />
					<u-checkbox style="position: absolute;top: 24rpx;right: 0;" shape="circle" @change="enterjobtime" v-model="data.thisyear"><text
							style="white-space: nowrap !important;">至今</text></u-checkbox>
					<u-icon @click="data.isendtime=true" name="arrow-right" color="#bbbbbb" size="40"></u-icon>
				</view>
			</u-form-item>
		</u-form>

		<!-- <button  @tap="submit">保存</button> -->
		
		<view class="bottomBoxBtn">
			<u-button  hoverClass="none" :customStyle="data.customStyle" @click="$u.throttle(submit,2000)">保存</u-button>
			<view class="delete" v-if="data.type=='edit'" @click="data.dele =true"><text>删除此条教育经历</text></view>
		</view>
		

		<!-- 学历 -->
		<u-picker v-model="data.iseducation" @confirm="confirm" range-key="name" mode="selector"
			:range="data.educationList" :default-selector="data.defaultIndex" ></u-picker>
		<!-- 入学时间 -->
		<u-picker v-model="data.isstarttime" :params="data.params" @confirm="starttimeConfirm"
			:default-time="data.formData.starttime?$u.timeFormat(new Date(data.formData.starttime), 'yyyy-mm-dd'):$u.timeFormat(new Date(), 'yyyy-mm-dd')"
			mode="time" ></u-picker>
		<!--毕业时间 -->
		<u-picker v-model="data.isendtime" :params="data.params" @confirm="endtimeConfirm"
			:default-time="data.formData.endtime?$u.timeFormat(new Date(data.formData.endtime), 'yyyy-mm-dd'):$u.timeFormat(new Date(), 'yyyy-mm-dd')"
			mode="time" ></u-picker>

		<u-modal @confirm="educationDelete" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.dele">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;">
				<text>确定删除该条教育经历吗？</text>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const form1 = ref();
	const data = reactive({
		customStyle:{
			color:'#fff',
			background:'#00d075',
			bordern:'none'
		},
		params: {
			year: true,
			month: true,
			day: false,
			hour: false,
			minute: false,
			second: false
		},
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		isNav: true,
		type: "",
		rules: {
			school: [{
				required: true,
				message: '请输入学校名称',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'blur',
			}],
			major: [{
				required: true,
				message: '请选择专业',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}],
			education_text: [{
				required: true,
				message: '请选择学历',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}],
			starttime: [{
				required: true,
				message: '请选择入学时间',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}],
			endtim_etext: [{
				required: true,
				message: '请选择毕业时间',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}]

		},
		formData: {
			school: '',
			education_text: '',
			education: '',
			starttime: "",
			endtime: "",
			endtim_etext:""
		},
		iseducation: false,
		isstarttime: false,
		isendtime: false,
		educationList: [],
		defaultIndex: [0],
		thisyear: false,
		dele: false,
		placeholderStyle: "color: #c0c4cc;"


	})
	
	// 获取学历列表
	const getEducationList = async () => {
		let params = {
			type: 'education'
		}
		let res = await uni.$u.api.getClassifyInfo({
			params
		})
		if (res) {
			data.educationList = res;
			let cur = data.educationList.findIndex(item => {
				return item.name == data.formData.education_text
			})
			if (cur != -1) {
				data.defaultIndex = [cur]
			}

		}
	}
	// 修改最高学历
	const confirm = (e) => {
		let index = e[0]
		data.formData.education_text = data.educationList[index].name;
		data.formData.education = data.educationList[index].id;
	}

	const enterjobtime = (e) => {
		if (e.value) {
			data.formData.endtime = 0
			data.formData.endtim_etext =  uni.$u.timeFormat(new Date(), 'yyyy-mm')
			data.formData.todate = 1
		} else {
			data.formData.todate = 0
			data.formData.endtime = 0
			data.formData.endtim_etext =  ""
		}
	}

	const starttimeConfirm = (e) => {
		data.formData.starttime = e.year + '-' + e.month
	}
	const endtimeConfirm = (e) => {
		data.formData.endtime = e.year + '-' + e.month
		data.formData.endtim_etext = e.year + '-' + e.month
		let nowdate = uni.$u.timeFormat(new Date(), 'yyyy-mm')
		if (data.formData.endtime == nowdate) {
			data.thisyear = true;
			data.formData.todate = 1
			data.formData.endtim_etext =  uni.$u.timeFormat(new Date(), 'yyyy-mm')
			data.formData.endtime = 0
		} else {
			data.thisyear = false;
			data.formData.todate = 0
		}
	}
	// 保存
	const submit = () => {
		form1.value.validate(async valid => {
			if (valid) {
				let res = await uni.$u.api.educationSave(data.formData)
				if (res) {
					uni.$u.toast(data.type == 'edit' ? '修改成功' : '添加成功')
					setTimeout(() => {
						uni.$u.route({
							type: 'back'
						})
					}, 1000)
				}
			}
		});
	}

	const educationDelete = async () => {
		let params = {
			id: data.formData.id
		}
		let res = await uni.$u.api.educationDelete(
			params
		)
		if (res) {
			uni.$u.toast("删除成功")
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 1000)
		}
	}
	onReady(() => {
		form1.value.setRules(data.rules)
	})
	onLoad(({
		item,
		type
	}) => {
		data.type = type
		if (type == "edit") {
			let code = decodeURIComponent(item)
			data.formData = JSON.parse(code)
			data.formData.starttime = uni.$u.timeFormat(new Date(data.formData.starttime * 1000), 'yyyy-mm')
			data.formData.endtime = uni.$u.timeFormat(new Date(data.formData.endtime * 1000), 'yyyy-mm')
			data.formData.endtim_etext = uni.$u.timeFormat(new Date(data.formData.endtime), 'yyyy-mm')
			if (data.formData.todate == 1) {
				data.thisyear = true
				data.formData.endtime = 0
				data.formData.endtim_etext =  uni.$u.timeFormat(new Date(), 'yyyy-mm')
			}
		}
		getEducationList()

	})
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #fff;
	}

	.container {
		padding: 30rpx;
		.delete {
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;

			text {
				color: #867F7F;
				font-size: 24rpx;
			}
		}
	}

	:deep .u-flex-1 {
		margin-left: 0 !important;
	}

	:deep .u-field__input-wrap {
		width: 500rpx !important;
	}
	.bottomBoxBtn {
		width: calc(100% - 60rpx);
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 30rpx 0;
		z-index: 999;
	}
</style>